<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子传父</title>
</head>
<body>
    <div id="app">
        <cpn :fid="id" @btnclick="cpnclick"></cpn>
    </div>

    <template id="cpn">
        <div>
            <h1>子组件标题</h1>
            <h2>子组件选择的id：{{fid}}</h2>
            <p>
                <button @click="itemclick(item)" v-for="(item,index) in fenlei">{{item.name}}</button>
            </p>
        </div>
    </template>

    <script src="../vue.js"></script>
    <script>

        const cpn={
            template:'#cpn',
            data(){
                return{
                    fenlei:[
                        {id:'a',name:'热门推荐'},
                        {id:'b',name:'店铺好评'},
                        {id:'c',name:'新品上市'},
                    ]
                }
            },
            props:{
                fid:{
                    type:String,
                    default:''
                }
            },
            methods: {
                itemclick(item){
                    console.log(item.id)
                    //子组件发出一个自定义事件
                    this.$emit('btnclick',item)
                }
            },
        }



        const app=new Vue({
            el:"#app",
            data:{
                id:''
            },
            methods: {
                //父组件接收子组件的事件,省略（），默认值为子组件传过来的值
                cpnclick(item){
                    console.log(item.id)
                    this.id=item.id
                }
            },
            components:{
                cpn
            }
        })
    </script>
</body>
</html>